<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .border_1{
            width: 500px;
            height: 400px;
            border: black 5px solid;
            margin: 80px 250px;
            background-image: url("images/cts-201014102201710.jpg");
            background-repeat: no-repeat;
            background-size: 500px,400px;
        }
        .border_2{
            width: 157px;
            height: 119px;
            background-color: gray;
            margin-left: 177px;
            margin-top: 167px;
            border-radius: 5px;
            text-align: center;
            line-height: 70px;
            font-size: 30px;
            font-weight: 500;
        }
        .border_3{
            width: 157px;
            height: 70px;
            border-radius: 5px;
            background-color: firebrick;
        }
        .border_4{
            width: 157px;
            height: 49px;
            background-color: gray;
            border-radius: 5px;

        }
        .light1{
            height: 40px;
            width: 40px;
            border-radius: 50%;
            background-color: red;
            float: left;
            margin-left: 5px;
            margin-top: 5px;
        }
        .light2{
            height: 40px;
            width: 40px;
            border-radius: 50%;
            background-color: yellow;
            float: left;
            margin-left: 15px;
            margin-top: 5px;
        }
        .light3{
            height: 40px;
            width: 40px;
            border-radius: 50%;
            background-color: green;
            float: left;
            margin-left: 15px;
            margin-top: 5px;
        }
        .control{
            height: 100px;
            width: 80px;
            border: black 5px solid;
            margin-left: 200px;
        }
        .form>input{
            height: 30px;
            width: 70px;
            margin-left: 5px;
            margin-top: 10px;
        }

    </style>
</head>
<body>
    <div class="border_1">

        <div class="border_2">

            <div class="border_3">
                00:00:10
            </div>
            <div class="border_4">
                <div class="light1"></div>
                <div class="light2"></div>
                <div class="light3"></div>
            </div>

        </div>

    </div>
    <div class="control">
        <form class="form">
            <input type="button" value="原地爆炸" id="boom">
            <input type="button" value="一键拆弹" id="open">

        </form>

    </div>
    <script src="jquery.min.js"></script>
    <script>
        var number = 10;
        $(".border_3")[0];
        $(".border_1")[0]
        var interval = setInterval(
            function () {
                if (number>=10){
                    t = number
                }else {
                    t = "0"+number
                }
                $(".border_3")[0].innerText = "00:00:"+t;
                if (number>0){
                    number -= 1
                }else {
                    $(".border_1")[0].css("background-image",'url("images/p.jpg")')
                    clearInterval(interval);

                }
            },1000
        )
        var light1 = document.getElementsByClassName("light1")[0]
        var light2 = document.getElementsByClassName("light2")[0]
        var light3 = document.getElementsByClassName("light3")[0]
        var color1 = "red"
        var color2 = "yellow"
        var color3 = "green"
        var interval2 = setInterval(
            function () {
                if (color1 == "red"){
                    color1 = "orange"
                }else if(color1 == "orange"){
                    color1 = "red"
                }
                light1.style.backgroundColor = color1

            },10
        )
        var interval3 = setInterval(
            function () {
                if (color2 == "yellow"){
                    color2 = "brown"
                }else if(color2 == "brown"){
                    color2 = "yellow"
                }
                light2.style.backgroundColor = color2

            },10
        )
        var interval4 = setInterval(
            function () {
                if (color3 == "green"){
                    color3 = "blue"
                }else if(color3 == "blue"){
                    color3 = "green"
                }
                light3.style.backgroundColor = color3
            },10
        )
        var boom = document.getElementById("boom")
        var open = document.getElementById("open")
        


    </script>


</body>
</html>